<template>
  <el-card v-loading="loading" shadow="hover" header="实时收入">
    <scEcharts ref="c1" height="300px" :option="option"></scEcharts>
  </el-card>
</template>

<script>
import scEcharts from '@/components/scEcharts'

export default {
  title: '实时收入',
  icon: 'el-icon-data-line',
  description: 'Echarts组件演示',
  components: {
    scEcharts,
  },
  data() {
    return {
      loading: true,
      option: {},
    }
  },
  created() {
    var _this = this
    setTimeout(function () {
      _this.loading = false
    }, 500)

    var option = {
      tooltip: {
        trigger: 'axis',
      },
      xAxis: {
        boundaryGap: false,
        type: 'category',
        data: (function () {
          var now = new Date()
          var res = []
          var len = 30
          while (len--) {
            res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
            now = new Date(now - 2000)
          }
          return res
        })(),
      },
      yAxis: [
        {
          type: 'value',
          name: '价格',
          splitLine: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: '收入',
          type: 'line',
          symbol: 'none',
          lineStyle: {
            width: 1,
            color: '#409EFF',
          },
          areaStyle: {
            opacity: 0.1,
            color: '#79bbff',
          },
          data: (function () {
            var res = []
            var len = 30
            while (len--) {
              res.push(Math.round(Math.random() * 0))
            }
            return res
          })(),
        },
      ],
    }
    this.option = option
  },
  mounted() {
    var _this = this
    setInterval(function () {
      var o = _this.option

      o.series[0].data.shift()
      o.series[0].data.push(Math.round(Math.random() * 100))

      o.xAxis.data.shift()
      o.xAxis.data.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))

      //_this.$refs.c1.myChart.setOption(o)
    }, 2100)
  },
}
</script>
